<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--全员参与-->
    <!--全员前端基础比较薄弱，所以开发的项目比较简单，主要是HTML+CSS构成，JavaScript较少，使用了Bootstrao框架，纯前端-->
    <!--HTML整体框架由黄梦娟、段江帆、钟健文完成-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端导航网</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--CSS样式部分由卿欢瑶、李佳怡完成-->
    <style>
        *{
            margin: 0;
            padding: 0;     
        }
        html,body{
            height: 100%;
            
        }
        body{
            min-height: 100%;
            position: relative;
        }
       .body-main{
           text-align: center;
           padding-bottom: 80px;
           
       }
       .search{
           text-align: center;
           padding-top: 70px;
       }
        .btn-search {
            width: 250px;
            margin: 50px auto;
            font-size: 20px;
            color: #fff;
            line-height: 28px;
            text-align: center;
            border-radius: 25px;
            cursor: pointer;
            background-image: linear-gradient(225deg, #8bb4fa, #3e82f7);
        }
        .btn-search:hover{
            width: 250px;
            margin: 50px auto;
            font-size: 20px;
            color: #fff;
            line-height: 28px;
            text-align: center;
            border-radius: 25px;
            cursor: pointer;
            background-image: linear-gradient(225deg, #3e82f7, #8bb4fa);
        }

        #q {
            width: 307px;
            height: 42px;
            padding: 5px;
            font-size: 20px;
            margin:0 auto;
            text-align: center;
        }

        li a {
            line-height: 30px;
            padding: 5px;
            text-decoration: none;
            color: black;
            display: block;
        }

        li a:hover {
            background: rgb(16, 124, 224);
            color: white;
        }
        .input-group-text{
            width: 250px;
            height: 35px;
            margin: 20px auto;
            font-size: 15px;
            color: #fff;
            padding-top: 15px;
            background-image: linear-gradient(225deg, #8bb4fa, #3e82f7);
        }
        .dx-list{
            margin-left: 10px;
        }
        .search img{
            margin-bottom: 100px;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;  
        }
        .search-logo{
            margin: 30px auto;
            height: 70px;
            width: 300px;
        }
        .footer{
            position: fixed;
            height: 80px;
            width:100%;
            background-color: rgb(16, 124, 224);
            bottom: 0;
        }
        .container{
            display: block;
            text-align: center;
            color: white;
            text-decoration: none;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        .hide{
            display: none;
        }
        /*手机底部解决方案*/
        @media screen and (max-width: 480px) {
        .nav-small{
            width: 100%;
            }
        .navbar-brand{
            display: none;
            }
        .search{
            margin: -50px;
            }
        }
    </style>
</head>

<body>
    <!--头部导航-->
    <header class="nav-small">
        <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: rgb(16, 124, 224);">
            <!-- 大标题 -->
            <a class="navbar-brand" href="#">前端导航网</a>
            <!-- 导航列表 -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="https://objtube.github.io/front-end-roadmap/#/" target="_blank">[推荐]前端学习路线</a>
                  </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://www.aliyundrive.com/s/cjFiqDGZysA" target="_blank">[推荐]前端学习电子书</a>
                  </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN技术文档</a>
                  </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://juejin.cn/" target="_blank">掘金社区</a>
                  </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://gitee.com/jishupang/Favorites" target="_blank">新手必看</a>
                  </li>
            </ul>
          </nav>
    </header>
    <!--主体-->
    <div class="body-main">
        <!--信息展示-->
        <div id="info" class="alert alert-info hide" style="width:300px;margin:5px auto 0px auto; ">你还没输入任何内容！</div>
        <div class="alert alert-success alert-dismissible hide" id="people"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>开发人员：</strong> 余柏霖（组长）、卿欢瑶、李佳怡、黄梦娟、段江帆、钟健文、薛明安、陈锦锴</div>
        <!--搜索主体-->
        <div class="search">
            <!--LOGO-->
            <div class="search-logo">
                <img src="./img/baidu.png" alt="logo" id="imglogo">
            </div>
            <!--搜索框-->
            <input type="text" id="q" class="form-control" placeholder="搜索一下"/>
            <!--搜索引擎-->
            <div class="input-group-text" id="choose">
                <label class="dx-list"><input type="radio" name="yinqing" value="baidu" checked>百度</label>
                <label class="dx-list"><input type="radio" name="yinqing" value="bing">必应</label>
                <label class="dx-list"><input type="radio" name="yinqing" value="juejin">掘金</label>
                <label class="dx-list"><input type="radio" name="yinqing" value="github">github</label>
            </div>
            <!--搜索按钮-->
              <div class="btn-search btn" id="Q1" >🔍搜索一下</div>
        </div>
    </div>
    <!--底部-->
    <footer class="footer">
        <div>
            <p class="container">特别支持：<a href="https://forum.juejin.cn/youthcamp/" target="_blank" style="text-align:none;color: white;">字节跳动青训营</a></p>
            <p class="container">Copyright © 2022 <a onclick=developer() href="#" style="color: white;">向往蓝天小组</a></p>
        </div>
      </footer>
</body>
<script src="./js/main.js"></script>
</html>